import React from 'react'
import Main from './mian/Main'
import MainTop from './maintop/Main'
import Footer from './footer/Footer'
import Top from './top/Content'
import './Header.css'
class App extends React.Component {
    constructor() {
        super()
        this.state = {
            num: 0
        }
        this.lis = [
            '口碑', '手机客户端', '开放平台', '本地生活'
        ]
        this.nav = [
            'a', 'b', 'c', 'd'
        ]

    }
    render() {
        return <div className='box'>
            <header>
                <div className="head_auto">
                    <img src={
                        require("./TB1w_p_bgFY.1VjSZFnXXcFHXXa-359-121.png").default
                    } alt=""
                    />
                    <ul>
                        {
                            this.lis.map((item, index) => {
                                return <li key={index} onClick={() => this.setState({ num: index })}>
                                    {item}
                                </li>
                            })
                        }
                        <li>
                            <span>网站支持</span>
                            <p>IPv6</p>
                        </li>
                    </ul>
                </div>
            </header>
            <main>
                {
                    [   <MainTop></MainTop>,
                        <Main></Main>,
                        <Footer></Footer>,
                        <Top></Top>
                    ].map((item, index) => {
                        return this.state.num === index ? <div key={index}>
                            {React.cloneElement(item)}
                        </div> : ''
                    })
                }
            </main>
            <footer>
                <div className='footer'>
                    <div className='footer-div'>
                        <div className='left'>
                            <div>
                                <h1>
                                    商务合作
                                </h1>
                            </div>
                            <div>
                                <img src="https://gw.alipayobjects.com/zos/rmsportal/jutCxnYUiNfTLfzhoiAU.png" alt=""/>
                                <p>手机：13116582430</p>
                            </div>
                        </div>
                        <div className='right'>
                            <div>
                                <div>
                                    <img src="https://gw.alipayobjects.com/os/f/cms/images/jg66q157/2be96072-cd6f-47fc-af0c-78d96b976b3b_w140_h140.png" alt="" className='right-img' />
                                </div>
                                <div>
                                    <img src="https://gw.alipayobjects.com/zos/rmsportal/OJbOftEQuNvuFYjZdTqb.png" alt=""/>
                                    <p>微博</p>
                                </div>
                            </div>
                            <div>
                                <div>
                                    <img src="https://gw.alipayobjects.com/zos/rmsportal/aSTewqcUOPxRhSdWFqVW.png" alt="" className='right-img'/>
                                </div>
                                <div>
                                    <img src="https://gw.alipayobjects.com/zos/rmsportal/NnRidofPluGJzaUQzIjE.png" alt=""/>
                                    <p>微信</p>
                                </div>
                                
                            </div>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
    }
}
export default App